<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍分类</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <script src="../js/index.js" type="text/javascript"></script>
    <meta name="author" content="王逸瑶">
    <meta name="keywords" content="魔方,魔方天地,图书">
    <meta name="description" content="魔方天地是一个介绍魔方的网站。">
    <meta name="robots" content="index,follow">
    <script>
        window.onload = function () {
            var oDrag = document.getElementsByName('piclist');
            var e = event || window.event;
            for (var iCv = 0; iCv < oDrag.length; iCv++) {
                oDrag[iCv].addEventListener('dragstart', function (e) {
                    var oDtf = e.dataTransfer;
                    oDtf.setData("text/html", addCart(this.title, this.alt, 1));
                }, false);
            }
            var oCart = document.getElementById('ulcart');
            oCart.addEventListener('drop', function (e) {
                var oDtf = e.dataTransfer;
                var sHtml = oDtf.getData("text/html");
                oCart.innerHTML += sHtml;
                e.preventDefault();
                e.stopPropagation();
            }, false);
            document.ondragover = function (e) {
                e.preventDefault();
            }
            document.ondrop = function () {
                e.preventDefault();
            }
        }

        function addCart(a, b, c) {
            var sHtml = "<li class='lie'>";
            sHtml += '<span>' + a + '</span>';
            sHtml += '<span>' + b + '</span>';
            sHtml += '<span>' + c + '</span>';
            sHtml += '<span>' + b * c + '</span>';
            sHtml += '</li>';
            return sHtml;
        }
    </script>
</head>
<body>
<!--页眉-->
<div id="header-wrapper">
    <!--网站logo-->
    <header class="container">
        <div id="logo">
            <a href="../homepage.html">
                <h1>魔方天地</h1>
            </a>
        </div>
        <div id="search">
            <form action="../homepage.html" method="get">
                <label>
                    <input type="search" placeholder="站内搜索">
                </label>
                <input type="submit" value="搜索">
            </form>
        </div>
    </header>
    <!--导航栏-->
    <div id="nav">
        <nav class="container">
            <ul>
                <li>
                    <a href="../homepage.html">首页</a>
                </li>
                <li>
                    <a href="category.html">魔方教程</a>
                    <ul>
                        <li><a href="#">二阶</a></li>
                        <li>
                            <a href="#">三阶</a>
                        </li>
                        <li>
                            <a href="#">高阶</a>
                        </li>
                        <li>
                            <a href="#" style="display: inline-block">
                                异形>
                                <!--                                <img src = "images/展开.png" style="height: 15px;width: auto"></img>-->
                            </a>
                            <ul>
                                <li class="nav3">
                                    <a href="#">金字塔</a>
                                </li>
                                <li class="nav3">
                                    <a href="#">五魔方</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="specials.html">淘宝小店</a>
                </li>
                <li>
                    <a href="contact.html">联系我们</a>
                </li>
                <li>
                    <a href="about.html">关于我们</a>
                </li>
            </ul>
            <div id="displaydate"></div>
            <div id="displaytime"></div>
            <div id="menu-logo">
                <a href="favorite.html">我的收藏</a>
            </div>
        </nav>
    </div>
</div>
<!--内容-->
<div id="content-wrapper" class="container">
    <!--左边内容区-->
    <article>
        <!-- InstanceBeginEditable name="EditRegion3" -->
        <section class="piclist">
            <h2 id="title8">热门教程</h2>
            <ul>
                <li><a href="https://www.cubeskills.com/tutorials"><img src="../images/cate1.png" id="img01"
                                                                        class="piclist" draggable="true" alt="58"
                                                                        title="《HTML和CSS3实例教程》"></a></li>
                <li><a href="https://www.cubeskills.com/tutorials"><img src="../images/cate2.png" id="img02"
                                                                        class="piclist" draggable="true" alt="98"
                                                                        title="《HTML和CSS3实例教程》"></a></li>
                <li><a href="https://www.cubeskills.com/tutorials"><img src="../images/cate3.png" id="img03"
                                                                        class="piclist" draggable="true" alt="48"
                                                                        title="《HTML和CSS3实例教程》"></a></li>
            </ul>
            <ul>
                <li><a href="https://www.cubeskills.com/tutorials"><img src="../images/cate4.png" id="img04"
                                                                        class="piclist" draggable="true" alt="38"
                                                                        title="《HTML和CSS3实例教程》"></a></li>
                <li><a href="https://www.cubeskills.com/tutorials"><img src="../images/cate5.png" id="img05"
                                                                        class="piclist" draggable="true" alt="28"
                                                                        title="《HTML和CSS3实例教程》"></a></li>
                <li><a href="https://www.cubeskills.com/tutorials"><img src="../images/cate6.png" id="img06"
                                                                        class="piclist" draggable="true" alt="28"
                                                                        title="《HTML和CSS3实例教程》"></a></li>
            </ul>
            <ul>
                <li><a href="https://www.cubeskills.com/tutorials"><img src="../images/cate7.png" id="img07"
                                                                        class="piclist" draggable="true" alt="38"
                                                                        title="《HTML和CSS3实例教程》"></a></li>
                <li><a href="https://www.cubeskills.com/tutorials"><img src="../images/cate8.png" id="img08"
                                                                        class="piclist" draggable="true" alt="28"
                                                                        title="《HTML和CSS3实例教程》"></a></li>
                <li><a href="https://www.cubeskills.com/tutorials"><img src="../images/cate9.png" id="img09"
                                                                        class="piclist" draggable="true" alt="28"
                                                                        title="《HTML和CSS3实例教程》"></a></li>
            </ul>
            <div id="pagebar">
                <a href="#" class="arrow">上一页</a>
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <a href="#">7</a>
                <a href="#">8</a>
                <a href="#">9</a>
                <a href="#">10</a>
                <a href="#" class="arrow">下一页</a>
            </div>
        </section>

        <!-- InstanceEndEditable -->
    </article>
    <!--rightside-->
    <aside>
        <div style="text-align: center">
            <section class="aside-section">
                <h2 class="title" style="text-align: left;">教程分类</h2>
                <ul>
                    <li><a href="category.html">三阶魔方基础教程</a></li>
                    <li><a href="category.html">三阶魔方进阶教程</a></li>
                    <li><a href="category.html">二阶魔方教程</a></li>
                    <li><a href="category.html">高阶魔方教程</a></li>
                    <li><a href="category.html">金字塔魔方教程</a></li>
                    <li><a href="category.html">五魔方魔方教程</a></li>
                </ul>
            </section>
            <!--cooperate-->
            <section class="aside-section">
                <h2 class="title" style="text-align: left;">合作伙伴</h2>
                <ul>
                    <li><a href="https://cubingchina.com/">粗饼·魔方赛事网</a></li>
                    <li><a href="https://www.worldcubeassociation.org/">WORLD CUBE ASSOCIATION</a></li>
                    <li><a href="https://www.cubeskills.com/">CubeSkills</a></li>
                    <li><a href="https://www.gancube.com/zh/">GANCUBE</a></li>
                </ul>
            </section>
        </div>
        <!--        <div class="border"><img src="images/border.gif" alt="分割线"/></div>-->
        <!--关于书店-->
        <section class="about">
            <h2 class="title" style="text-align: left;">关于本站</h2>
            <img src="../images/about.gif" alt="魔方天地">
            <p>魔方天地成立于2021年5月，由浙江工业大学软件工程专业1904班王逸瑶所作，为前端大作业。若有不足，还望海涵。</p>
        </section>
        <!--        <section id="advert">-->
        <!--            <a href="#"><img src="images/ad1.jpg" alt="广告"></a>-->
        <!--            <a href="#"><img src="images/ad2.jpg" alt="广告"></a>-->
        <!--            <a href="#"><img src="images/ad3.jpg" alt="广告"></a>-->
        <!--        </section>-->
    </aside>
</div>
<!--页脚-->
<div id="footer-wrapper">
    <!--页脚导航-->
    <footer class="container">
        <section>
            <a href="../homepage.html">首页</a> <a href="about.html">关于我们</a> <a href="#">服务条款</a> <a
                href="#">隐私策略</a> <a href="contact.html">联系我们</a>
        </section>
    </footer>
</div>
<!--版权标志-->
<section id="copyright">
    Copyright (C)
    <a href="../homepage.html">魔方天地</a>
    2021-2022，All Rights Reserved |
    京ICP证000001号音像制品经营许可证
    <address>通讯地址：浙江工业大学屏峰校区&nbsp;&nbsp;电话：17857114514&nbsp;&nbsp;网管信箱：201906061915@zjut.edu.cn
        <a href="https://gitee.com/wyysteelhead_admin/cudingsite" style="font-size: 16px">代码开源地址</a>
    </address>

</section>
</body>
<!-- InstanceEnd --></html>